<!DOCTYPE html>
<html>
<title> 边框属性实现三角箭头及其原理</title>
<meta charset="utf-8" />

<head>
    <style>
        #demo {
            border: 10px solid #333;
            border-left-color: #f00;
            width: 10px;
            height: 10px;
            /*border-color:#333 transparent transparent ;*/
        }

        #demo2 {
            border: 10px solid transparent;
            border-left-color: #f00;
            width: 0;
            height: 0;
        }

        #demo3 {
            border: 10px solid transparent;
            border-top-color: #f00;
            width: 0;
            height: 0;
        }

        #demo4 {
            border: 10px solid transparent;
            border-bottom-color: #f00;
            width: 0;
            height: 0;
        }

        #demo5 {
            border-width: 0 6px 6px;
            border-style: dashed dashed solid;
            border-color: transparent transparent #555
        }

        #demo6 {
            border-width: 16px;
            border-style: solid;
            border-color: transparent transparent #555
        }
    </style>

</head>

<body>

    <h3>边框属性实现三角箭头及其原理</h3>
    <p>基本原理<br>原理非常简单，通过截取border(边框)的部分“拐角”实现，几行CSS代码即可理解：<br>
        一个梯形<br>当元素宽、高和边框的宽相近（等）时，改变某一边的颜色可以看到一个梯形；</p>
    <p id="demo">
    <p>

    <h3>一个三角形,当元素宽、高为零，且其他边为透明颜色时，可以形一个三角形。</h3>
    <p id="demo2">
    <p>

    <h3>把它变成往下的三角</h3>
    <p id="demo3">
    <p>

    <h3>同理把它变成往上的三角</h3>
    <p id="demo4">
    <p>

    <h3>其他一些方法：如下(需要注意的时，这里的实现方法是没有使用width和height属性的)</h3>
    <i id="demo5"></i>

    <h3>改变点css: 体会，实现三角的重点属性是border-color的属性</h3>
    <i id="demo6"></i>


</body>

</html>